<template>
  <div>
    <b-container>
        <b-row>
            <b-col lg="6"><h2>{{$t('hello')}}</h2></b-col>
            <b-col lg="6">
                语言切换: 
                <span class="lang" @click="LangChange('CN')">CN</span>/ 
                <span class="lang" @click="LangChange('TW')">TW</span>
            </b-col>
        </b-row>
        <b-row class="wrapper">
            <b-col sm="6" md="4" lg="3">1 of 3</b-col>
            <b-col sm="6" md="4" lg="3">2 of 3</b-col>
            <b-col sm="6" md="4" lg="3">3 of 3</b-col>
            <b-col sm="6" md="4" lg="3" offset-md="4">3 of 3</b-col>
        </b-row>
    </b-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "bootstrap"
    };
  },
  methods:{
      LangChange(lang){
          this.$i18n.locale = lang;
      }
  }
};
</script>

<style scoped>
.wrapper {
  text-align: center;
}
.lang{
    color: blue;
    cursor: pointer;
}
</style>


